<!DOCTYPE html>
<html lang="en"   data-vue="vmGrade">
<head>
    <meta charset="UTF-8">
    <title>Grade title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="Description"  content="">
    <meta name="Keywords"  content="">
    <link href="res/images/cont/favicon.ico" rel="shortcut icon">

    <link rel="stylesheet" href="res/css/all-common.css">
    <link rel="stylesheet" href="res/css/grade.css">

    <!--html font size set-->
    <script src="res/js/set-font-size.js"></script>

    <!--js common start-->
    <script src="res/lib/jquery/jquery.min.js"></script>
    <script src="res/lib/store/store-json2.min.js"></script>
    <script src="res/lib/vue/vue.min.js"></script>
    <script src="res/lib/moment/moment.min.js"></script>
    <script src="res/lib/moment/moment-locales.min.js"></script>
    <script src="res/js/common.js"></script>
    <!--js common end-->
</head>
<body>
<header class="p-clear-fix">
    <p class="lang" id="langBox">
                <a href="javascript:void(0);" data-lang="zh-TW">繁体中文</a> /
                <a href="javascript:void(0);" data-lang="zh-CN">简体中文</a> /
                <a href="javascript:void(0);" data-lang="en">English</a>
   </p>

    <h1>
        <a href="/index.html" title="Logo" class="flex-abs-mid"><img src="/res/images/cont/index/logo.png" /></a>
    </h1>

<!--    <div class="login">
        <a href="#">
            <img src="/res/images/cont/index/login-2.png" />
        </a>


        <p class="login-btn hide">
            <a href="#" class="p-btn-round">登陆</a>
            <a href="#">注册</a>
        </p>

        <p class="user-info ">
            <a href="#"><img src="/res/images/cont/index/user-male.png" /></a>
            <a href="#" class="name">Aaron.Ming Aaron.Ming</a>
            <a href="#" class="p-btn-round">退出</a>
        </p>


    </div>-->
</header>
<!--main nav-->
<nav class="p-clear-fix">
    <ul class="p-clear-fix" id="mainNav">
        <li data-name="index"><a href="index.html"  >新闻</a></li>
        <li data-name="points"><a href="points.html">积分</a></li>
        <li data-name="matches"><a href="matches.html">比赛</a></li>
        <li data-name="grade" ><a href="grade.html" >实力评级</a></li>
    </ul>
</nav>
<section class="area">
    <ul id="regionArea">
        <li  data-val="50"  class="cur"><img src="/res/images/cont/location/location-global.png" class="global-img" > <span>Global</span></li>
        <li  data-val="45"><img src="/res/images/cont/location/location-lck.png"> <span>LCK</span></li>
        <li  data-val="44"><img src="/res/images/cont/location/location-lcseu.png"> <span>EULCS</span></li>
        <li  data-val="41"><img src="/res/images/cont/location/location-lpl.png" > <span>LPL</span></li>
        <li  data-val="43"><img src="/res/images/cont/location/location-lcsna.png" > <span>NALCS</span></li>
        <li  data-val="42"><img src="/res/images/cont/location/location-lms.png" > <span>LMS</span></li>
    </ul>
</section>
<div class="p-tab grade"  >
    <ul class="p-tab-h p-clear-fix"  id="gradeType">
        <li class="cur" data-view="team"><span>战队</span></li>
        <li  data-view="player"><span>选手</span></li>
    </ul>
    <div class="p-tab-c">
        <div class="p-tab-item ">
            <!--战队表-->
<section class="corps-list" id="teamList">
    <ul class=" data-li-table data-b-bottom ">
        <li class="title-row">
            <div class="col col-1" >排名</div>
            <div class="col col-2" >战队</div>
            <div class="col col-3" >地区</div>
            <div class="col col-4">实力评分</div>
        </li>
    </ul>


        <ul class=" data-li-table data-b-bottom " >
            <template v-for="item in list | orderBy 'Points' -1">
                <li>
                    <a  href="grade-detail-team.html?id=1">
                    <div class="col col-1">
                        <span> 01</span>
                    </div>
                    <div class="col col-2">
                        <div class="inner">
                            <div class="img-box">
                                <img src="http://cdn.esportsmatrix.com/Content/images/uploaded/team/638b44a7-a9fa-4e15-9205-257a6f921d26.png" alt="name">
                            </div>
                            <p>{{item.TeamName}}</p>
                        </div>
                    </div>
                    <div class="col col-3">
                        <img width="20" src="http://cdn.esportsmatrix.com/Content/images/uploaded/region/5b1b4242-3392-4b3d-8ace-12315c14f6f1.jpg" alt="name">
                    </div>
                    <div class="col col-4 p-yellow-po">{{item.Points}}</div>
                    </a>
                </li>
            </template>
        </ul>


    <div class="load-more">
        <div class="load-wrap hide">
            <div class="loader">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
            <div class="loader-text" >正在加载...</div>
        </div>
        <div class="none-data" >已经没有了</div>
        <div class="load-fail">加载失败，戳我重新加载。</div>
    </div>
</section>
        </div>
        <div class="p-tab-item  hide">
            <!--选手类型-->
<section class="filter p-clear-fix" id="playerType">
    <select v-select="selected" v-on:change="getList">
        <option v-for="item in list" v-bind:value="item.Id">
            {{ item.TypeName }}
        </option>
    </select>

</section>
            <!--选手表-->
<section class="corps-list" id="playerList">
    <ul class=" data-li-table data-b-bottom ">
        <li class="title-row">
            <div class="col col-1" >排名</div>
            <div class="col col-2" >选手</div>
            <div class="col col-3" >地区</div>
            <div class="col col-4">实力评分</div>
        </li>
    </ul>



    <ul class=" data-li-table data-b-bottom" >
        <template v-for="item in list | orderBy 'Points' -1">
            <li>
                <a href="grade-detail-player.html">
                    <div class="col col-1">
                        <span> 01</span>
                    </div>
                    <div class="col col-2">
                        <div class="inner">
                            <div class="img-box">
                                <img src="http://cdn.esportsmatrix.com/Content/images/uploaded/player/aa9e17d2-b344-4b54-ab91-0ce6a4a1cb41.PNG">
                            </div>
                            <p>{{item.PlayerName}}</p>
                        </div>
                    </div>
                    <div class="col col-3">
                        <img width="20" src="http://cdn.esportsmatrix.com/Content/images/uploaded/region/5b1b4242-3392-4b3d-8ace-12315c14f6f1.jpg" alt="name">
                    </div>
                    <div class="col col-4 p-yellow-po">{{item.Points}}</div>
                </a>
            </li>
        </template>
    </ul>

    <div class="load-more">
        <div class="load-wrap hide">
            <div class="loader">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
            <div class="loader-text" >正在加载...</div>
        </div>
        <div class="none-data" >已经没有了</div>
        <div class="load-fail">加载失败，戳我重新加载。</div>
    </div>
</section>
        </div>
    </div>
</div>
<!--page js-->
<script src="res/js/grade.js"></script>
</body>
</html>